<!-- 中英文切换的组件 -->
<template>
  <div class="language-change m_l_14 m_r_14">
    <el-dropdown class="drop_memu" @command="handleCommond">
      <i class="iconfont f_z_24 c_p" :class="languageIcon"></i>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item command="zh" :disabled="currentLanguage === 'zh'">{{
            $t("language.chinese.title")
          }}</el-dropdown-item>
          <el-dropdown-item command="en" :disabled="currentLanguage === 'en'">{{
            $t("language.english.title")
          }}</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script setup>
import { computed } from "vue";
import { useI18n } from "vue-i18n";

// 导入pinia对象
import Store from "@/store/index";
const store = Store();
const i18n = useI18n();

//切换语音的图标
let languageIcon = ref("icon-zhongyingwen2zhongwen");

/**
 * @param {*} val 比对的语言值
 */
const sysLang = (val) => {
  if (val === "zh") {
    languageIcon.value = "icon-zhongyingwen2zhongwen";
  } else if (val === "en") {
    languageIcon.value = "icon-zhongyingwenyingwen";
  }
};

//同步初始化的语言状态
sysLang(store.useLanguage.getLanguage);

//通过计算属性监听当前的语言
const currentLanguage = computed(() => {
  return i18n.locale.value;
});

//el-dropdown的选中事件回调
const handleCommond = (val) => {
  //修改i18n的值
  i18n.locale.value = val;
  //同步pinia中保存的当前的语言类型
  store.useLanguage.setLanguage(val);
  //存储本地的保存的语言类型
  localStorage.setItem("lang", val);
  //同步语言切换的值
  sysLang(val);
};
</script>
<style lang="scss" scoped>
.language-change {
  //这个样式是去掉el-dropdown的默认选中的黑色边框
  .drop_memu :deep(.el-tooltip__trigger:focus-visible) {
    outline: unset;
  }

  .icon-language {
    font-size: 24px;
  }
}
</style>
